<template>
	<!-- 容器 -->
	<view class="container">
		
		<!-- 标题区域 -->
		
		<!-- 项目区域 -->
		<view class="project-section">
			<uni-section title="项目基础信息" type="line">
				<view class="example">
					<uni-forms ref="form" :rules="rules" labelWidth="120px">
						<uni-forms-item label="项目名称" name="name">
							<uni-easyinput placeholder="请输入项目名称" />
						</uni-forms-item>
						<uni-forms-item label="项目省市" name="city">
							<picker mode="multiSelector" :value="multiIndex" :range="multiArray">
								<view class="uni-input">{{multiArray[0][multiIndex[0]]}}，{{multiArray[1][multiIndex[1]]}}，{{multiArray[2][multiIndex[2]]}}</view>
							</picker>
						</uni-forms-item>
						<uni-forms-item label="项目详细地址" name="address">
							<uni-easyinput placeholder="请输入项目详细地址"/>
						</uni-forms-item>
					</uni-forms>
				</view>
			</uni-section>
		</view>
		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				rules: {
					
				},
				multiArray: [
					['北京','天津','河北'],
					['北京市','天津市','廊坊市','邯郸市'],
					['东城区','西城区','海淀区','河东区','河西区','滨海新区','A区','B区']
				],
				multiIndex: [0,0,0]
			}
		}
	}
</script>

<style>
	.container {
		background-color: lightgrey;
	}
	
	.project-section {
		background-color: white;
		border-radius: 16upx 16upx;
	}
	
	.example {
		padding: 15px;
	}
	
	.form-item {
		display: flex;
		align-items: center;
		flex: 1;
	}
</style>